<template>
    <div class="playlistDetails">
        <!-- 歌单介绍 -->
        <div class="introduce">
            <!-- 图片 -->
            <div class="img">
                <el-image :src="playlistDetail.coverImgUrl" lazy>
                    <template #placeholder>
                        <div class="image-slot">加载中<span class="dot">...</span></div>
                    </template>
                </el-image>
            </div>
            <!-- 右边的文本内容 -->
            <div class="text">
                <!-- 标题 -->
                <div class="title">
                    <span class="tag">歌单</span>
                    <span class="name">{{ playlistDetail.name }}</span>
                </div>
                <!-- 作者信息 -->
                <div class="authorInfo">
                    <!-- 头像 -->
                    <el-image :src="playlistDetail.creator.backgroundUrl">
                        <template #placeholder>
                            <div class="image-slot">加载中<span class="dot">...</span></div>
                        </template>
                    </el-image>
                    <!-- 作者名字 -->
                    <span class="name">
                        {{ playlistDetail.creator.nickname }}
                    </span>
                    <!-- 创建时间 -->
                    <span class="createdDate"> {{ timestampToDate(playlistDetail.createTime) }}创建</span>
                </div>
                <!-- 播放全部、收藏、分享 -->
                <div class="operate">
                    <!-- 播放全部 -->
                    <el-button type="danger" id="playAll">
                        <i class="iconfont icon-24gl-playCircle"></i>
                        <span>播放全部</span>
                    </el-button>
                    <!-- 收藏 -->
                    <el-button type="danger" plain>
                        <i class="iconfont icon-shoucang"></i>
                        <span>收藏</span>
                    </el-button>
                    <!-- 分享 -->
                    <el-button type="danger" plain>
                        <i class="iconfont icon-fenxiang"></i>
                        <span>分享</span>
                    </el-button>
                </div>
                <!-- 歌曲数量和播放量 -->
                <div class="count">
                    <div class="songsCount">歌曲：{{ playlistDetail.trackCount }}首</div>
                    <div class="playCount">
                        播放量：{{ (playlistDetail.playCount / 10000).toFixed(1) }}万
                    </div>
                </div>
            </div>
        </div>

        <!-- 歌曲部分 -->
        <el-tabs class="playlistContent" v-model="selectedTag">
            <el-tab-pane label="歌单歌曲" name="songs">
                <Sonlist :songlist="songlist"></Sonlist>
            </el-tab-pane>
            <el-tab-pane label="歌单评论" name="comments">
                <Comment :id="id"></Comment>
            </el-tab-pane>
            <el-tab-pane label="歌单描述" name="descrip">Role</el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'
// 引入歌单详情api
import { playlistDetails } from '../../api/playList/playlistDetails';
// 引入歌曲数据api
import sonlist from '../../api/playList/sonlist'
// 引入时间戳
import { timestampToDate } from '../../utils/time'


const route = useRoute()
const router = useRouter()
// 定义一个空对象接收返回的详情数据
let playlistDetail: any = ref({
    coverImgUrl: '',
    creator: ''
})
// 获取点击图片的id
let id = route.params.id

let selectedTag = ref('songs')


// 异步接收详情数据
async function getPlaylistDetails() {
    let res: any = await playlistDetails(id)
    // console.log(res.playlist);
    playlistDetail.value = res.playlist
    await getSonlist()
}

// 定义歌单中的音乐
let songlist = ref()

// 异步接收歌曲数据
async function getSonlist(){
    const ids: any = []
    // console.log(playlistDetail.value);
    playlistDetail.value.trackIds.forEach((trackId: { id: number }) => {
    ids.push(trackId.id)
  })
    const res:any = await sonlist(ids)
    // console.log(res);
    songlist.value = res.songs
    // console.log(songlist);
    
}




getPlaylistDetails()


</script>

<style lang="less">
.playlistDetails {
    width: 100%;
    margin: 25px 0px 10px 20px;

    .introduce {
        display: flex;
        margin-bottom: 1rem;

        .el-image {
            width: 11rem;
            height: 11rem;
            border-radius: 1rem;
        }

        .text {
            width: calc(100%-12rem);
            margin-left: 2rem;

            .title {
                display: flex;
                align-items: center;
                margin-bottom: 1rem;

                .tag {
                    display: block;
                    height: 1.5rem;
                    width: 4rem;
                    color: #ec4141;
                    font-size: 15px !important;
                    text-align: center;
                    border: 1px solid #ec4141;
                    border-radius: 5px;
                    margin-right: 0.5rem;
                }

                .name {
                    font-size: 24px;
                    font-weight: bold;
                    color: #000;
                }
            }

            .authorInfo {
                display: flex;
                align-items: center;
                margin-bottom: 1rem;

                .el-image {
                    height: 2rem;
                    width: 2rem;
                    margin-right: 0.5rem;
                }

                .name {
                    color: #6191c2;
                    cursor: pointer;
                    margin-right: 0.5rem;
                }

                .createdDate {
                    font-size: 13px;
                    color: #444;
                }
            }

            .operate {
                margin-bottom: 1rem;

                #playAll i {
                    font-size: 22px;
                }

                span {
                    margin-left: 0.5rem;
                }
            }

            .count {
                display: flex;
                font-size: 14px;
                color: #444;

                .songsCount {
                    margin-right: 1rem;
                }
            }
        }
    }

    .playlistContent {

        .description {
            font-size: 14px;
            color: #373737;
            line-height: 1.5rem;
            // letter-spacing 属性增加或减少字符间的空白（字符间距）
            letter-spacing: 1px;
            // 首行缩进
            text-indent: 2rem;
        }
        .el-tabs__active-bar {
        background-color: #e13e3e;
        height: 0.2rem;
      }

      .is-active {
        font-size: 18px !important;
        font-weight: bolder;
        color: black;
      }
    }
}
</style>